
<script setup>
import { reactive, ref } from 'vue';

import baseModel from "@/components/baseModel/baseModel.vue";
import request from "@/common/utils/request";
// 右侧 swiper组件
import ViewSwiper from '@/views/shotstack/GraphicTextCut/Components/ViewSwiper.vue'
const ViewSwiperRef = ref()


const props = defineProps({

});

const dialog = ref(null)

const state = reactive({
    list: null,
    title:''
})

// 打开弹窗
const showModal = (item) => {
    state.list = item.resource_data
    state.title = item.title
  dialog.value && dialog.value.showModal();
};
// 关闭弹窗
const closeModal = () => {
  dialog.value && dialog.value.closeModal()
};

defineExpose({
  showModal,
  closeModal
});

</script>
<template>
  <div>
    <baseModel ref="dialog" :footer="null" :contentWidth="'500px'" :destroyOnClose="true"  :maskClosable="false" :centered="true" :closable="true">
      <template #title>
        <span>{{ state?.title || '' }}</span>
      </template>
      <template #content>
        <div class="content">
            <!-- swiper组件 -->
            <ViewSwiper style="height: 100%;" ref="ViewSwiperRef" :viewList="state.list"></ViewSwiper>
        </div>
      </template>
      <template #footer>
        <span></span>
      </template>
    </baseModel>

  </div>

</template>

<style lang="less" scoped>

  :deep(.ss-modal-footer){
    padding: 0px;
  }

    .content{
        // padding: 20px 10% 0;
        padding-top: 20px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>